export let chart_1 = (echarts) => {
  var option = {
    backgroundColor: "#ffffff",
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    grid: {
      left: "2%",
      right: "4%",
      bottom: "14%",
      top: "16%",
      containLabel: true,
    },
    legend: {
      data: ["1", "2", "3"],
      right: 10,
      top: 12,
      textStyle: {
        color: "#333333",
      },
      itemWidth: 12,
      itemHeight: 10,
      // itemGap: 35
    },
    xAxis: {
      type: "category",
      data: [
        "2月1日",
        "2月2日",
        "2月3日",
        "2月4日",
        "2月5日",
        "2月6日",
        "2月7日",
        "2月8日",
      ],
      axisLine: {
        lineStyle: {
          color: "#7B8C95",
        },
      },
      axisLabel: {
        // interval: 0,
        // rotate: 40,
        textStyle: {
          fontFamily: "Microsoft YaHei",
        },
      },
    },

    yAxis: {
      type: "value",
      max: null,
      axisLine: {
        show: false,
        lineStyle: {
          color: "#7B8C95",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#E9F3F8",
        },
      },
      axisLabel: {},
    },
    series: [
      {
        name: "",
        type: "bar",
        barWidth: 20,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#D0F0EE",
              },
              {
                offset: 1,
                color: "#97CBE7",
              },
            ]),
            barBorderRadius: [10, 10, 0, 0],
          },
        },
        data: [400, 400, 300, 300, 300, 400, 400, 400, 300],
      },
    ],
  };
  return option;
};

export let chart_2 = () => {
  var option = {
    backgroundColor: "#ffffff",
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    grid: {
      left: "2%",
      right: "4%",
      bottom: "10%",
      top: "16%",
      containLabel: true,
    },
    legend: {
      data: ["行业平均", "已测项目", "未测项目"],
      right: 10,
      bottom: 12,
      textStyle: {
        color: "#333333",
      },
      itemWidth: 60,
      itemHeight: 10,
      itemGap: 35,
    },
    xAxis: {
      type: "category",
      data: ["抑郁", "焦虑", "情感", "压力", "人际关系"],
      axisLine: {
        lineStyle: {
          color: "#7B8C95",
        },
      },
      axisLabel: {
        // interval: 0,
        // rotate: 40,
        textStyle: {
          fontFamily: "Microsoft YaHei",
        },
      },
    },

    yAxis: {
      type: "value",
      max: "1200",
      axisLine: {
        show: false,
        lineStyle: {
          color: "#7B8C95",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#E9F3F8",
        },
      },
      axisLabel: {},
    },
    series: [
      {
        name: "行业平均",
        type: "bar",
        barWidth: "15%",
        itemStyle: {
          normal: {
            color: "#97CBE7",
            barBorderRadius: [10, 10, 0, 0],
          },
        },
        data: [400, 400, 300, 300, 300, 400, 400, 400, 300],
      },
      {
        name: "已测项目",
        type: "bar",
        barWidth: "15%",
        itemStyle: {
          normal: {
            color: "#D0F0EE",
            barBorderRadius: [10, 10, 0, 0],
          },
        },
        data: [400, 500, 500, 500, 500, 400, 400, 500, 500],
      },
    ],
  };

  return option;
};

export let chart_3 = () => {
  let option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    legend: {
      data: ["已测人数", "未测人数", "C级门店"],
      bottom: 0,
      right: 10,
      itemWidth: 30,
      itemHeight: 10,
      itemGap: 35,
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "10%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      max: null,
    },
    yAxis: {
      type: "category",
      data: ["福建", "广州", "厦门", "南宁", "背景", "长沙", "重庆"],
    },
    series: [
      {
        name: "已测人数",
        type: "bar",
        stack: "总量",
        barWidth: 30,
        itemStyle: {
          normal: {
            color: "rgb(151,203,231)",
            barBorderRadius: [0, 20, 20, 0],
          },
        },
        label: {
          normal: {
            show: true,
            position: "insideRight",
          },
        },
        z: 10,
        data: [320, 302, 301, 334, 390, 330, 320],
      },
      {
        name: "未测人数",
        type: "bar",
        stack: "总量",
        itemStyle: {
          normal: {
            color: "rgb(208,240,239)",
            shadowBlur: [0, 0, 0, 10],
            shadowColor: "rgb(208,240,239)",
            barBorderRadius: [0, 20, 20, 0],
            // shadowOffsetX: -20,
          },
        },
        label: {
          normal: {
            show: true,
            position: "insideRight",
          },
        },
        z: 5,
        data: [120, 132, 101, 134, 90, 230, 210],
      },
    ],
  };
  return option;
};
export let chart_4 = (echarts) => {
  //负数的柱子，圆头朝下的样例见本人其他作品
  let option = {
    backgroundColor: "#fff",
    grid: {
      top: "15%",
      right: "10%",
      left: "10%",
      bottom: "12%",
    },
    xAxis: [
      {
        type: "category",
        color: "#59588D",
        data: [
          "2月1日",
          "2月2日",
          "2月3日",
          "2月4日",
          "2月5日",
          "2月6日",
          "2月7日",
        ],
        axisLabel: {
          margin: 20,
          color: "#999",
          textStyle: {
            fontSize: 18,
          },
        },
        axisLine: {
          lineStyle: {
            color: "rgba(107,107,107,0.37)",
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        axisLabel: {
          formatter: "{value}%",
          color: "#999",
          textStyle: {
            fontSize: 18,
          },
        },
        axisLine: {
          lineStyle: {
            color: "rgba(107,107,107,0.37)",
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: "rgba(131,101,101,0.2)",
            type: "dashed",
          },
        },
      },
    ],

    series: [
      {
        type: "bar",
        data: [40, 80, 20, 50, 20, 30, 40, 30],
        barWidth: "50px",
        itemStyle: {
          normal: {
            color: function (params) {
              let colorArr =
                params.value > 0
                  ? ["#FF9A22", "#FFD56E"]
                  : ["#FFD56E", "#FF9A22"];
              return new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "#9AEEDC", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#D0F0EE", // 100% 处的颜色
                  },
                ],
                false
              );
            },
            barBorderRadius: [30, 30, 0, 0],
          },
        },
        label: {
          normal: {
            show: true,
            fontSize: 18,
            fontWeight: "bold",
            color: "#333",
            position: "top",
          },
        },
      },
      {
        data: [40, 80, 20, 50, 20, 30, 40, 30],
        type: "line",
        smooth: true,
        name: "折线图",
        symbol: "none",
        lineStyle: {
          type: "dotted",
          color: "#97CBE7",
          width: 4,
          barBorderRadius: [30, 30, 0, 0],
        },
      },
    ],
  };
  return option;
};
export let chart_5 = () => {
  let OPTION = {
    legend: {
      data: ["阳性晒出", "女性", "男性"],
      bottom: 0,
      right: 20,
    },
    toolbox: {
      show: true,
      feature: {
        saveAsImage: { show: false },
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow", // 配置阴影效果，使提示框跟随鼠标移动
      },
      formatter: function (params) {
        var result = params[0].name + "<br>"; // 获取类目轴的值
        params.forEach(function (item) {
          result += item.seriesName + ": " + Math.abs(item.value) + "<br>"; // 获取每个柱子的系列名称和值
        });
        return result;
      },
    },
    grid: {
      top: "0%",
      left: "3%",
      right: "4%",
      bottom: "10%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "value",
        axisLabel: {
          formatter: function (value) {
            return Math.abs(value); // 使用绝
          },
        },
      },
    ],
    yAxis: [
      {
        type: "category",
        axisTick: { show: false },
        data: ["产品1", "产品2", "产品3", "产品4", "产品5", "产品6"],
      },
    ],
    series: [
      {
        name: "阳性晒出",
        type: "bar",
        stack: "stack",
        label: {
          normal: {
            show: true,
          },
        },
        itemStyle: {
          normal: {
            color: "#97CBE7", // 柱状图颜色
            barBorderRadius: [0, 30, 30, 0],
          },
        },
        barWidth: 20,
        data: [220, 302, 341, 174, 30, 450],
      },
      {
        name: "女性",
        type: "bar",
        stack: "stack",
        label: {
          normal: {
            show: true,
            position: "left",
          },
        },
        itemStyle: {
          normal: {
            color: "#D0F0EE", // 柱状图颜色
            barBorderRadius: [30, 0, 0, 30],
          },
        },
        barWidth: 20,
        data: [-120, -132, -101, -134, -190, -230],
        label: {
          show: true,
          formatter: function (params) {
            return Math.abs(params.value); // 使用绝对值来显示正数
          },
        },
      },
      {
        name: "男性",
        type: "bar",
        stack: "stack",
        label: {
          normal: {
            show: true,
            position: "left",
          },
        },
        itemStyle: {
          normal: {
            color: "rgb(108,130,165)", // 柱状图颜色
            barBorderRadius: [30, 0, 0, 30],
          },
        },
        barWidth: 20,
        data: [-120, -132, -101, -134, -190, -230],
        label: {
          show: true,
          formatter: function (params) {
            return Math.abs(params.value); // 使用绝对值来显示正数
          },
        },
      },
    ],
  };
  // var a = OPTION.series[0].data;
  // var b = OPTION.series[1].data;
  // var sum = [];
  // for (var i = 0; i < a.length; i++) {
  //     sum[i] = a[i] + b[i];
  // }

  // OPTION.series.unshift({
  //     name: "差距",
  //     type: "bar",
  //     barWidth: 20,
  //     label: {
  //         normal: {
  //             show: true,
  //             position: "inside",
  //         },
  //     },
  //     itemStyle: {
  //         normal: {
  //             color: "#6B81A3", // 柱状图颜色
  //             barBorderRadius: [0, 30, 30, 0],
  //         },
  //     },
  //     data: sum,
  // });
  return OPTION;
};
export let chart_6 = () => {
  let option = {
    title: [
      {
        text: "5693",
        x: "45%",
        y: "42%",
        textStyle: {
          fontSize: 34,
          fontWeight: "normal",
          fontStyle: "normal",
          color: "#333333",
        },
      },
      {
        text: "总人数",
        x: "42%",
        y: "55%",
        textStyle: {
          fontSize: 24,
          fontWeight: "normal",
          fontStyle: "normal",
          color: "#666666",
        },
      },
    ],
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    legend: {
      bottom: "5%",
      itemGap: 40,
      textStyle: {
        fontSize: 12,
        padding: [0, 0, 0, 4],
      },
      data: ["正常人数", "预警人数", "风险人数"],
    },
    color: ["#B3EBD5", "#F6E5C9", "#F7ACAC"],
    series: [
      {
        name: "总人数",
        type: "pie",
        center: ["50%", "50%"],
        radius: ["45%", "55%"],
        startAngle: 360,
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false,
            position: "center",
          },
          emphasis: {
            show: false,
            textStyle: {
              fontSize: "30",
              fontWeight: "bold",
            },
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
        },
        data: [
          {
            value: 95,
            name: "正常人数",
          },
          {
            value: 2,
            name: "预警人数",
          },
          {
            value: 3,
            name: "风险人数",
          },
        ],
      },
    ],
  };
  return option;
};

// ----------------------
export let chart_7 = () => {
  let option = {
    grid: {
      top: "20%",
      bottom: "10%",
    },
    backgroundColor: "#ffffff",
    legend: {
      data: ["自我肯定", "抑郁", "焦虑"],
      top: "2%",
      right: "10",
      textStyle: {
        color: "#333",
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow", // 配置阴影效果，使提示框跟随鼠标移动
      },
    },
    xAxis: {
      data: ["1", "2", "3"],
    },
    yAxis: [
      {
        type: "value",
        /*name: "亿元",*/
        nameTextStyle: {
          color: "#ebf8ac",
          fontSize: 16,
        },
        splitLine: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#333333",
            width: 1,
          },
        },
        axisLabel: {
          show: true,
          textStyle: {
            fontSize: 16,
          },
        },
      },
      {
        type: "value",
        show: false,
        /*name: "同比",*/
        nameTextStyle: {
          color: "#ebf8ac",
          fontSize: 16,
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "销售量",
        type: "line",
        yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
        // smooth: true, //平滑曲线显示
        showAllSymbol: true, //显示所有图形。
        itemStyle: {
          //折线拐点标志的样式
          color: "#F7ACAC",
          borderColor: "#F7ACAC",
        },
        lineStyle: {
          color: "#F7ACAC",
          width: 2,
        },

        data: [13, 14, 15],
      },

      {
        name: "自我肯定",
        type: "bar",
        barWidth: 15,
        itemStyle: {
          normal: {
            color: "rgb(151,203,231)",
            borderWidth: 2,
          },
        },
        data: [3, 6, 2],
      },
      {
        name: "抑郁",
        type: "bar",
        barWidth: 15,
        itemStyle: {
          normal: {
            color: "rgb(247,172,172)",
            borderWidth: 2,
          },
        },
        data: [5, 2, 3],
      },
      {
        name: "焦虑",
        type: "bar",
        barWidth: 15,
        itemStyle: {
          normal: {
            color: "rgb(252,245,216)",
            borderWidth: 2,
          },
        },
        data: [3, 2, 1],
      },
    ],
  };

  return option;
};
export let chart_8 = () => {
  let option = {
    backgroundColor: "#ffffff",
    grid: {
      left: "10%",
      right: "10%",
      bottom: "10%",
      top: "10%",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow", // 配置阴影效果，使提示框跟随鼠标移动
      },
    },
    legend: {
      //图例组件，颜色和名字
      right: "10%",
      top: "10%",
      itemGap: 16,
      itemWidth: 18,
      itemHeight: 10,
      data: [1, 2],
      textStyle: {
        color: "#a8aab0",
        fontStyle: "normal",
        fontFamily: "微软雅黑",
        fontSize: 12,
      },
    },
    xAxis: {
      data: ["抑郁", "焦虑", "睡眠", "心理风险", "职场"],
      axisLine: {
        lineStyle: {
          color: "#333333",
        },
      },
      axisLabel: {
        color: "#333333",
        fontSize: 14,
      },
    },
    yAxis: {
      // name: "（人）",
      nameTextStyle: {
        color: "#333333",
        fontSize: 14,
      },
      axisLine: {
        lineStyle: {
          color: "#333333",
        },
      },
      axisLabel: {
        color: "#333333",
        fontSize: 14,
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: "#0177d4",
        },
      },
      interval: 50,
      max: null,
    },
    series: [
      {
        type: "bar",
        barWidth: 20,
        itemStyle: {
          normal: {
            color: "rgb(151,203,231)",
          },
        },
        data: [],
      },
    ],
  };
  return option;
};
export let chart_9 = () => {
  let option = {
    backgroundColor: "#fff",
    title: {
      text: "各类型注销数量占比",
    },
    tooltip: {},
    series: [
      {
        name: "吊销注销",
        type: "pie",
        radius: ["18%", "22%"],
        center: ["15%", "50%"],
        color: "#FF4500",
        label: {
          normal: {
            position: "center",
          },
        },
        data: [
          {
            value: 32,
            name: "吊销注销数",

            label: {
              normal: {
                formatter: "{d} %",
                textStyle: {
                  fontSize: 18,
                },
              },
            },
            tooltip: {
              trigger: "item",
              formatter:
                "{a} <br/>计算公式:占比率=({b}/注销总数)*100%<br/> 吊销注销数 : {c}",
            },
          },
          {
            value: 72,
            name: "其他类型数",
            label: {
              normal: {
                formatter: "\n吊销注销占比",
                textStyle: {
                  color: "#555",
                  fontSize: 13,
                },
              },
            },
            itemStyle: {
              normal: {
                color: "#aaa",
              },
              emphasis: {
                color: "#aaa",
              },
            },
          },
        ],
      },
      {
        name: "到期注销",
        type: "pie",
        radius: ["18%", "22%"],
        center: ["40%", "50%"],
        color: "#473C8B",
        label: {
          normal: {
            position: "center",
          },
        },
        data: [
          {
            value: 54,
            name: "到期注销数",

            label: {
              normal: {
                formatter: "{d} %",
                textStyle: {
                  fontSize: 18,
                },
              },
            },
            tooltip: {
              trigger: "item",
              formatter:
                "{a} <br/>计算公式:占比率=({b}/注销总数)*100%<br/> 到期注销数 : {c}",
            },
          },
          {
            value: 50,
            name: "其他类型数",
            label: {
              normal: {
                formatter: "\n到期注销占比",
                textStyle: {
                  color: "#555",
                  fontSize: 13,
                },
              },
            },
            itemStyle: {
              normal: {
                color: "#aaa",
              },
              emphasis: {
                color: "#aaa",
              },
            },
          },
        ],
      },
      {
        name: "申请注销",
        type: "pie",
        radius: ["18%", "22%"],
        center: ["65%", "50%"],
        color: "#00EE76",
        label: {
          normal: {
            position: "center",
          },
        },
        data: [
          {
            value: 18,
            name: "申请注销数",

            label: {
              normal: {
                formatter: "{d} %",
                textStyle: {
                  fontSize: 18,
                },
              },
            },
            tooltip: {
              trigger: "item",
              formatter:
                "{a} <br/>计算公式:占比率=({b}/注销总数)*100%<br/> 申请注销数 : {c}",
            },
          },
          {
            value: 86,
            name: "其他类型数",
            label: {
              normal: {
                formatter: "\n申请注销占比",
                textStyle: {
                  color: "#555",
                  fontSize: 13,
                },
              },
            },
            itemStyle: {
              normal: {
                color: "#aaa",
              },
              emphasis: {
                color: "#aaa",
              },
            },
          },
        ],
      },
    ],
  };
  return option;
};
export let chart_10 = () => {
  let option = {
    backgroundColor: "#ffffff",
    grid: {
      borderWidth: 0,
      top: 110,
      bottom: "5%",
      textStyle: {
        color: "#fff",
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow", // 配置阴影效果，使提示框跟随鼠标移动
      },
    },
    legend: {
      x: "45%",
      top: "8%",

      textStyle: {
        color: "#333333",
      },
      data: ["正常", "轻度", "重度"],
    },
    xAxis: [
      {
        type: "category",
        axisLine: {
          lineStyle: {
            color: "#333333",
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitArea: {
          show: false,
        },
        axisLabel: {
          interval: 0,
        },
        data: [],
      },
    ],
    yAxis: [
      {
        type: "value",
        splitLine: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: "#333333",
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
        },
        splitArea: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "正常",
        type: "bar",
        stack: "人",
        barMaxWidth: 35,
        barGap: "10%",
        itemStyle: {
          normal: {
            color: "rgb(186,244,222)",
            label: {
              show: true,
              textStyle: {
                color: "#fff",
              },
              position: "inside",
              formatter: function (p) {
                return p.value > 0 ? p.value : "";
              },
            },
          },
        },
        data: [327, 1776, 507, 1200, 800, 482, 204, 1390, 1001, 951, 381, 220],
      },

      {
        name: "轻度",
        type: "bar",
        stack: "人",
        itemStyle: {
          normal: {
            color: "rgb(246,229,201)",
            barBorderRadius: 0,
            label: {
              show: true,
              position: "inside",
              formatter: function (p) {
                return p.value > 0 ? p.value : "";
              },
            },
          },
        },
        data: [327, 1776, 507, 1200, 800, 482, 204, 1390, 1001, 951, 381, 220],
      },
      {
        name: "重度",
        type: "bar",
        stack: "人",
        itemStyle: {
          normal: {
            color: "rgb(247,172,172)",
            barBorderRadius: 0,
            label: {
              show: true,
              position: "inside",
              formatter: function (p) {
                return p.value > 0 ? p.value : "";
              },
            },
          },
        },
        data: [327, 1776, 507, 1200, 800, 482, 204, 1390, 1001, 951, 381, 220],
      },
    ],
  };

  return option;
};
export let chart_11 = () => {
  let option = {
    backgroundColor: "#fff",

    tooltip: {
      trigger: "item",
      formatter: "{b} : {d}% <br/> {c}",
    },
    legend: {
      orient: "vertical",
      data: ["客服", "内容审核", "管理者", "其他"],
      left: "20px",
      top: "150px",
      textStyle: {
        color: "#333",
        fontSize: 14,
      },
    },
    series: [
      {
        type: "pie",
        radius: ["70", "120"],
        center: ["50%", "50%"],
        color: ["#B3EBD5", "#97CBE7", "#F7ACAC", "#F6E5C9"],
        itemStyle: {
          normal: {
            borderWidth: 1,
            borderColor: "#fff",
          },
        },
        data: [],
        labelLine: {},
        label: {
          normal: {
            formatter: "{b|{b}}\n{hr|}\n{c|{c}}",
            rich: {
              b: {
                fontSize: 16,
                color: "#333",
                align: "left",
                padding: 4,
              },

              c: {
                fontSize: 16,
                align: "center",
                padding: 4,
                color: "#333",
              },
            },
          },
        },
      },
    ],
  };

  return option;
};

export let chart_12 = () => {
  let option = {
    polar: {
      radius: ["30%", "50%"],
      center: ["50%", "50%"],
    },
    angleAxis: {
      max: 70,
      show: false,
    },
    radiusAxis: {
      type: "category",
      show: true,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        name: "",
        type: "bar",
        roundCap: true,
        barWidth: 30,
        showBackground: true,
        backgroundStyle: {
          color: "#fff",
        },
        data: [60],
        coordinateSystem: "polar",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: "#97CBE7",
              },
              {
                offset: 1,
                color: "#9AEEDC",
              },
            ]),
          },
        },
      },
    ],
  };

  return option;
};
export let chart_13 = () => {
  let option = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "Email",
        type: "line",
        stack: "Total",
        data: [120, 132, 101, 134, 90, 230, 210],
      },
      {
        name: "Union Ads",
        type: "line",
        stack: "Total",
        data: [220, 182, 191, 234, 290, 330, 310],
      },
      {
        name: "Video Ads",
        type: "line",
        stack: "Total",
        data: [150, 232, 201, 154, 190, 330, 410],
      },
      {
        name: "Direct",
        type: "line",
        stack: "Total",
        data: [320, 332, 301, 334, 390, 330, 320],
      },
      {
        name: "Search Engine",
        type: "line",
        stack: "Total",
        data: [820, 932, 901, 934, 1290, 1330, 1320],
      },
    ],
  };
  return option;
};
export let chart_14 = () => {
  let option = {
    grid: {
      top: "20%",
      bottom: "10%",
    },
    backgroundColor: "#ffffff",
    legend: {
      data: ["自我肯定", "抑郁", "焦虑"],
      top: "2%",
      right: "10",
      textStyle: {
        color: "#333",
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    xAxis: {
      data: ["1", "2", "3"],
    },
    yAxis: [
      {
        type: "value",
        /*name: "亿元",*/
        nameTextStyle: {
          color: "#ebf8ac",
          fontSize: 16,
        },
        splitLine: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#333333",
            width: 1,
          },
        },
        axisLabel: {
          show: true,
          textStyle: {
            fontSize: 16,
          },
        },
      },
      {
        type: "value",
        show: false,
        /*name: "同比",*/
        nameTextStyle: {
          color: "#ebf8ac",
          fontSize: 16,
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "销售量",
        type: "line",
        yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
        // smooth: true, //平滑曲线显示
        showAllSymbol: true, //显示所有图形。
        itemStyle: {
          //折线拐点标志的样式
          color: "#F7ACAC",
          borderColor: "#F7ACAC",
          width: 0,
        },
        lineStyle: {
          color: "#F7ACAC",
          width: 2,
        },

        data: [13, 14, 15],
      },

      {
        name: "自我肯定",
        type: "bar",
        barWidth: 15,
        itemStyle: {
          normal: {
            color: "rgb(151,203,231)",
            borderWidth: 2,
          },
        },
        data: [3, 6, 2],
      },
      {
        name: "抑郁",
        type: "bar",
        barWidth: 15,
        itemStyle: {
          normal: {
            color: "rgb(247,172,172)",
            borderWidth: 2,
          },
        },
        data: [5, 2, 3],
      },
      {
        name: "焦虑",
        type: "bar",
        barWidth: 15,
        itemStyle: {
          normal: {
            color: "rgb(252,245,216)",
            borderWidth: 2,
          },
        },
        data: [3, 2, 1],
      },
    ],
  };

  return option;
};
export let chart_15 = () => {
  let option = {
    title: [
      {
        text: "5693",
        x: "33%",
        y: "45%",
        textStyle: {
          fontSize: 19,
          fontWeight: "normal",
          fontStyle: "normal",
          color: "#333333",
        },
      },
      {
        text: "",
        x: "44%",
        y: "55%",
        textStyle: {
          fontSize: 20,
          fontWeight: "normal",
          fontStyle: "normal",
          color: "#666666",
        },
      },
    ],
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    // legend: {
    //     bottom: "5%",
    //     itemGap: 40,
    //     textStyle: {
    //         fontSize: 15,
    //         padding: [0, 0, 0, 4],
    //     },
    //     data: ["正常人数", "预警人数", "风险人数"],
    // },
    color: ["#B3EBD5", "#cdcdcd"],
    series: [
      {
        name: "总人数",
        type: "pie",
        center: ["50%", "50%"],
        radius: ["45%", "55%"],
        startAngle: 360,
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false,
            position: "center",
          },
          emphasis: {
            show: false,
            textStyle: {
              fontSize: "30",
              fontWeight: "bold",
            },
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
        },
        data: [
          {
            value: 95,
            name: "正常人数",
          },
          {
            value: 2,
            name: "预警人数",
          },
        ],
      },
    ],
  };
  return option;
};
export let chart_16 = () => {
  let option = {
    title: [
      {
        text: "5693",
        x: "33%",
        y: "45%",
        textStyle: {
          fontSize: 19,
          fontWeight: "normal",
          fontStyle: "normal",
          color: "#333333",
        },
      },
      {
        text: "",
        x: "44%",
        y: "55%",
        textStyle: {
          fontSize: 20,
          fontWeight: "normal",
          fontStyle: "normal",
          color: "#666666",
        },
      },
    ],
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    // legend: {
    //     bottom: "5%",
    //     itemGap: 40,
    //     textStyle: {
    //         fontSize: 15,
    //         padding: [0, 0, 0, 4],
    //     },
    //     data: ["正常人数", "预警人数", "风险人数"],
    // },
    color: ["#F6E5C9", "#cdcdcd"],
    series: [
      {
        name: "总人数",
        type: "pie",
        center: ["50%", "50%"],
        radius: ["45%", "55%"],
        startAngle: 360,
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false,
            position: "center",
          },
          emphasis: {
            show: false,
            textStyle: {
              fontSize: "30",
              fontWeight: "bold",
            },
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
        },
        data: [
          {
            value: 95,
            name: "正常人数",
          },
          {
            value: 2,
            name: "预警人数",
          },
        ],
      },
    ],
  };
  return option;
};
export let chart_17 = () => {
  let option = {
    title: [
      {
        text: "5693",
        x: "33%",
        y: "45%",
        textStyle: {
          fontSize: 19,
          fontWeight: "normal",
          fontStyle: "normal",
          color: "#333333",
        },
      },
      {
        text: "",
        x: "44%",
        y: "55%",
        textStyle: {
          fontSize: 20,
          fontWeight: "normal",
          fontStyle: "normal",
          color: "#666666",
        },
      },
    ],
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    // legend: {
    //     bottom: "5%",
    //     itemGap: 40,
    //     textStyle: {
    //         fontSize: 15,
    //         padding: [0, 0, 0, 4],
    //     },
    //     data: ["正常人数", "预警人数", "风险人数"],
    // },
    color: ["#F7ACAC", "#cdcdcd"],
    series: [
      {
        name: "总人数",
        type: "pie",
        center: ["50%", "50%"],
        radius: ["45%", "55%"],
        startAngle: 360,
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false,
            position: "center",
          },
          emphasis: {
            show: false,
            textStyle: {
              fontSize: "30",
              fontWeight: "bold",
            },
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
        },
        data: [
          {
            value: 95,
            name: "正常人数",
          },
          {
            value: 2,
            name: "预警人数",
          },
        ],
      },
    ],
  };
  return option;
};
export let chart_18 = () => {
  let option = {
    backgroundColor: "#ffffff",
    grid: {
      borderWidth: 0,
      top: 110,
      bottom: "20%",
      textStyle: {
        color: "#fff",
      },
    },
    legend: {
      x: "45%",
      top: "8%",
      textStyle: {
        color: "#333333",
      },
      data: ["自我肯定", "抑郁", "焦虑"],
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    xAxis: [
      {
        type: "category",
        axisLine: {
          lineStyle: {
            color: "#333333",
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitArea: {
          show: false,
        },
        axisLabel: {
          interval: 0,
        },
        data: [],
      },
    ],
    yAxis: [
      {
        type: "value",
        splitLine: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: "#333333",
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
        },
        splitArea: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "自我肯定",
        type: "bar",
        stack: "人",
        barMaxWidth: 35,
        barGap: "10%",
        itemStyle: {
          normal: {
            color: "rgb(186,244,222)",
            label: {
              show: true,
              textStyle: {
                color: "#fff",
              },
              position: "inside",
              formatter: function (p) {
                return p.value > 0 ? p.value : "";
              },
            },
          },
        },
        data: [],
      },

      {
        name: "抑郁",
        type: "bar",
        stack: "人",
        itemStyle: {
          normal: {
            color: "rgb(246,229,201)",
            barBorderRadius: 0,
            label: {
              show: true,
              position: "inside",
              formatter: function (p) {
                return p.value > 0 ? p.value : "";
              },
            },
          },
        },
        data: [327, 1776, 507, 1200, 800, 482, 204, 1390, 1001, 951, 381, 220],
      },
      {
        name: "焦虑",
        type: "bar",
        stack: "人",
        itemStyle: {
          normal: {
            color: "rgb(247,172,172)",
            barBorderRadius: 0,
            label: {
              show: true,
              position: "inside",
              formatter: function (p) {
                return p.value > 0 ? p.value : "";
              },
            },
          },
        },
        data: [327, 1776, 507, 1200, 800, 482, 204, 1390, 1001, 951, 381, 220],
      },
    ],
  };

  return option;
};
export let chart_19 = () => {
  let option = {
    grid: {
      top: "20%",
      bottom: "10%",
    },
    backgroundColor: "#ffffff",
    legend: {
      data: ["咨询小时", "咨询人数", "咨询人次"],
      top: "2%",
      right: "10",
      textStyle: {
        color: "#333",
        fontSize: 12,
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow", // 配置阴影效果，使提示框跟随鼠标移动
      },
    },
    xAxis: {
      data: [],
      type: "category",
    },
    yAxis: [
      {
        type: "value",
        /*name: "亿元",*/
        nameTextStyle: {
          color: "#ebf8ac",
          fontSize: 16,
        },
        splitLine: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#333333",
            width: 1,
          },
        },
        axisLabel: {
          show: true,
          textStyle: {
            fontSize: 16,
          },
        },
      },
      {
        type: "value",
        show: false,
        /*name: "同比",*/
        nameTextStyle: {
          color: "#ebf8ac",
          fontSize: 16,
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "咨询小时",
        type: "bar",
        smooth: true,
        barWidth: 15,
        itemStyle: {
          normal: {
            color: "rgb(151,203,231)",
            borderWidth: 2,
          },
        },
        data: [3, 6, 2],
      },
      {
        name: "咨询人数",
        type: "bar",
        smooth: true,
        barWidth: 15,
        itemStyle: {
          normal: {
            color: "rgb(247,172,172)",
            borderWidth: 2,
          },
        },
        data: [5, 2, 3],
      },
      {
        name: "咨询人次",
        type: "bar",

        smooth: true,
        barWidth: 15,
        itemStyle: {
          normal: {
            color: "rgb(252,245,216)",
            borderWidth: 2,
          },
        },
        data: [3, 2, 1],
      },
    ],
  };
  return option;
};
export let chart_20 = () => {
  let option = {
    backgroundColor: "#fff",

    tooltip: {
      trigger: "item",
      formatter: "{b} : {d}% <br/> {c}",
    },
    legend: {
      // orient: "vertical",
      data: [
        "客服部",
        "内容审核",
        "管理者",
        "其他",
        "客服部1",
        "内容审核1",
        "管理者1",
        "其他1",
        "客服部2",
        "内容审核2",
        "管理者2",
        "其他2",
      ],
      left: "center",
      top: "0",
      textStyle: {
        color: "#333",
        fontSize: 12,
      },
    },
    series: [
      {
        type: "pie",
        radius: ["70", "120"],
        center: ["50%", "50%"],
        // color: ["#B3EBD5", "#97CBE7", "#F7ACAC", "#F6E5C9"],
        itemStyle: {
          normal: {
            borderWidth: 1,
            borderColor: "#fff",
          },
        },
        data: [
          { name: "客服部", value: 15 },
          { name: "内容审核", value: 30 },
          { name: "管理者", value: 174 },
          { name: "其他", value: 7 },
          { name: "客服部1", value: 15 },
          { name: "内容审核1", value: 30 },
          { name: "管理者1", value: 174 },
          { name: "其他1", value: 7 },
          { name: "客服部2", value: 15 },
          { name: "内容审核2", value: 30 },
          { name: "管理者2", value: 174 },
          { name: "其他2", value: 7 },
        ],
        labelLine: {},
        label: {
          normal: {
            formatter: "{b|{b}}\n{hr|}\n{c|{c}}",
            rich: {
              b: {
                fontSize: 12,
                color: "#333",
                align: "left",
                padding: 4,
              },

              c: {
                fontSize: 12,
                align: "center",
                padding: 4,
                color: "#333",
              },
            },
          },
        },
      },
    ],
  };
  return option;
};
export let chart_21 = () => {
  let option = {
    backgroundColor: "#fff",

    tooltip: {
      trigger: "item",
      formatter: "{b} : {d}% <br/> {c}",
    },
    legend: {
      // orient: "vertical",
      data: [
        "客服部",
        "内容审核",
        "管理者",
        "其他",
        "客服部1",
        "内容审核1",
        "管理者1",
        "其他1",
        "客服部2",
        "内容审核2",
        "管理者2",
        "其他2",
      ],
      left: "center",
      top: "0",
      textStyle: {
        color: "#333",
        fontSize: 12,
      },
    },
    series: [
      {
        type: "pie",
        radius: ["70", "120"],
        center: ["50%", "50%"],
        color: ["#F7ACAC", "#97CBE7"],
        itemStyle: {
          normal: {
            borderWidth: 1,
            borderColor: "#fff",
          },
        },
        data: [
          { name: "客服部", value: 15 },
          { name: "内容审核", value: 30 },
          { name: "管理者", value: 174 },
          { name: "其他", value: 7 },
          { name: "客服部1", value: 15 },
          { name: "内容审核1", value: 30 },
          { name: "管理者1", value: 174 },
          { name: "其他1", value: 7 },
          { name: "客服部2", value: 15 },
          { name: "内容审核2", value: 30 },
          { name: "管理者2", value: 174 },
          { name: "其他2", value: 7 },
        ],
        labelLine: {},
        label: {
          normal: {
            formatter: "{b|{b}}\n{hr|}\n{c|{c}}",
            rich: {
              b: {
                fontSize: 12,
                color: "#333",
                align: "left",
                padding: 4,
              },

              c: {
                fontSize: 12,
                align: "center",
                padding: 4,
                color: "#333",
              },
            },
          },
        },
      },
    ],
  };
  return option;
};

export let chart_22 = (echarts) => {
  var option = {
    backgroundColor: "#ffffff",
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    grid: {
      left: "2%",
      right: "4%",
      bottom: "14%",
      top: "16%",
      containLabel: true,
    },
    legend: {
      data: ["1", "2", "3"],
      right: 10,
      top: 12,
      textStyle: {
        color: "#333333",
      },
      itemWidth: 12,
      itemHeight: 10,
      // itemGap: 35
    },
    xAxis: {
      type: "category",
      data: [
        "2月1日",
        "2月2日",
        "2月3日",
        "2月4日",
        "2月5日",
        "2月6日",
        "2月7日",
        "2月8日",
      ],
      axisLine: {
        lineStyle: {
          color: "#7B8C95",
        },
      },
      axisLabel: {
        // interval: 0,
        // rotate: 40,
        textStyle: {
          fontFamily: "Microsoft YaHei",
        },
      },
    },

    yAxis: {
      type: "value",
      max: null,
      axisLine: {
        show: false,
        lineStyle: {
          color: "#7B8C95",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#E9F3F8",
        },
      },
      axisLabel: {},
    },
    series: [
      {
        name: "",
        type: "bar",
        barWidth: 20,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#D0F0EE",
              },
              {
                offset: 1,
                color: "#97CBE7",
              },
            ]),
            barBorderRadius: [10, 10, 0, 0],
          },
        },
        data: [400, 400, 300, 300, 300, 400, 400, 400, 300],
      },
    ],
  };
  return option;
};
export let chart_23 = () => {
  let option = {
    backgroundColor: "#fff",

    tooltip: {
      trigger: "item",
      formatter: "{b} : {d}% <br/> {c}",
    },
    legend: {
      // orient: "vertical",
      data: ["客服部", "内容审核", "管理者", "其他"],
      left: "center",
      top: "0",
      textStyle: {
        color: "#333",
        fontSize: 12,
      },
    },
    series: [
      {
        type: "pie",
        radius: ["50", "70"],
        center: ["50%", "50%"],
        // color: ["#B3EBD5", "#97CBE7", "#F7ACAC", "#F6E5C9"],
        itemStyle: {
          normal: {
            borderWidth: 1,
            borderColor: "#fff",
          },
        },
        data: [
          { name: "客服部", value: 15 },
          { name: "内容审核", value: 30 },
          { name: "管理者", value: 174 },
          { name: "其他", value: 7 },
        ],
        labelLine: {},
        label: {
          normal: {
            formatter: "{b|{b}}\n{hr|}\n{c|{c}}",
            rich: {
              b: {
                fontSize: 12,
                color: "#333",
                align: "left",
                padding: 0,
              },

              c: {
                fontSize: 12,
                align: "center",
                padding: 0,
                color: "#333",
              },
            },
          },
        },
      },
    ],
  };
  return option;
};
export let chart_24 = () => {
  let option = {
    backgroundColor: "#fff",

    tooltip: {
      trigger: "item",
      formatter: "{b} : {d}% <br/> {c}",
    },
    legend: {
      // orient: "vertical",
      data: ["客服部", "内容审核", "管理者", "其他"],
      left: "center",
      top: "0",
      textStyle: {
        color: "#333",
        fontSize: 12,
      },
    },
    series: [
      {
        type: "pie",
        radius: ["50", "70"],
        center: ["50%", "50%"],
        // color: ["#B3EBD5", "#97CBE7", "#F7ACAC", "#F6E5C9"],
        itemStyle: {
          normal: {
            borderWidth: 1,
            borderColor: "#fff",
          },
        },
        data: [
          { name: "客服部", value: 15 },
          { name: "内容审核", value: 30 },
          { name: "管理者", value: 174 },
          { name: "其他", value: 7 },
        ],
        labelLine: {},
        label: {
          normal: {
            formatter: "{b|{b}}\n{hr|}\n{c|{c}}",
            rich: {
              b: {
                fontSize: 12,
                color: "#333",
                align: "left",
                padding: 0,
              },

              c: {
                fontSize: 12,
                align: "center",
                padding: 0,
                color: "#333",
              },
            },
          },
        },
      },
    ],
  };
  return option;
};
export let chart_25 = () => {
  let option = {
    backgroundColor: "#fff",
    tooltip: {
      trigger: "item",
      formatter: "{b} : {d}% <br/> {c}",
    },
    legend: {
      // orient: "vertical",
      data: ["客服部", "内容审核", "管理者", "其他"],
      left: "center",
      top: 0,
      textStyle: {
        color: "#333",
        fontSize: 12,
      },
    },
    series: [
      {
        type: "pie",
        radius: ["50", "70"],
        center: ["50%", "50%"],
        // color: ["#B3EBD5", "#97CBE7", "#F7ACAC", "#F6E5C9"],
        itemStyle: {
          normal: {
            borderWidth: 1,
            borderColor: "#fff",
          },
        },
        data: [
          { name: "客服部", value: 15 },
          { name: "内容审核", value: 30 },
          { name: "管理者", value: 174 },
          { name: "其他", value: 7 },
        ],
        labelLine: {},
        label: {
          normal: {
            formatter: "{b|{b}}\n{hr|}\n{c|{c}}",
            rich: {
              b: {
                fontSize: 12,
                color: "#333",
                align: "left",
                padding: 0,
              },

              c: {
                fontSize: 12,
                align: "center",
                padding: 0,
                color: "#333",
              },
            },
          },
        },
      },
    ],
  };
  return option;
};
export let chart_26 = () => {
    let option = {
        backgroundColor: "#fff",
    
        tooltip: {
          trigger: "item",
          formatter: "{b} : {d}% <br/> {c}",
        },
        legend: {
          // orient: "vertical",
          data: ["客服部", "内容审核", "管理者", "其他"],
          left: "center",
          top: "0",
          textStyle: {
            color: "#333",
            fontSize: 12,
          },
        },
        series: [
          {
            type: "pie",
            radius: ["50", "70"],
            center: ["50%", "50%"],
            // color: ["#B3EBD5", "#97CBE7", "#F7ACAC", "#F6E5C9"],
            itemStyle: {
              normal: {
                borderWidth: 1,
                borderColor: "#fff",
              },
            },
            data: [
              { name: "客服部", value: 15 },
              { name: "内容审核", value: 30 },
              { name: "管理者", value: 174 },
              { name: "其他", value: 7 },
            ],
            labelLine: {},
            label: {
              normal: {
                formatter: "{b|{b}}\n{hr|}\n{c|{c}}",
                rich: {
                  b: {
                    fontSize: 12,
                    color: "#333",
                    align: "left",
                    padding: 0,
                  },
    
                  c: {
                    fontSize: 12,
                    align: "center",
                    padding: 0,
                    color: "#333",
                  },
                },
              },
            },
          },
        ],
      };
  return option;
};
export let chart_27 = () => {
  let option = {
    backgroundColor: "#fff",

    tooltip: {
      trigger: "item",
      formatter: "{b} : {d}% <br/> {c}",
    },
    legend: {
      // orient: "vertical",
      data: ["客服部", "内容审核", "管理者", "其他"],
      left: "center",
      top: "0",
      textStyle: {
        color: "#333",
        fontSize: 12,
      },
    },
    series: [
      {
        type: "pie",
        radius: ["50", "70"],
        center: ["50%", "50%"],
        // color: ["#B3EBD5", "#97CBE7", "#F7ACAC", "#F6E5C9"],
        itemStyle: {
          normal: {
            borderWidth: 1,
            borderColor: "#fff",
          },
        },
        data: [
          { name: "客服部", value: 15 },
          { name: "内容审核", value: 30 },
          { name: "管理者", value: 174 },
          { name: "其他", value: 7 },
        ],
        labelLine: {},
        label: {
          normal: {
            formatter: "{b|{b}}\n{hr|}\n{c|{c}}",
            rich: {
              b: {
                fontSize: 12,
                color: "#333",
                align: "left",
                padding: 0,
              },

              c: {
                fontSize: 12,
                align: "center",
                padding: 0,
                color: "#333",
              },
            },
          },
        },
      },
    ],
  };
  return option;
};
export let chart_28 = () => {
  let option = {
    backgroundColor: "#fff",

    tooltip: {
      trigger: "item",
      formatter: "{b} : {d}% <br/> {c}",
    },
    legend: {
      // orient: "vertical",
      data: ["客服部", "内容审核", "管理者", "其他"],
      left: "center",
      top: "0",
      textStyle: {
        color: "#333",
        fontSize: 12,
      },
    },
    series: [
      {
        type: "pie",
        radius: ["50", "70"],
        center: ["50%", "50%"],
        // color: ["#B3EBD5", "#97CBE7", "#F7ACAC", "#F6E5C9"],
        itemStyle: {
          normal: {
            borderWidth: 1,
            borderColor: "#fff",
          },
        },
        data: [
          { name: "客服部", value: 15 },
          { name: "内容审核", value: 30 },
          { name: "管理者", value: 174 },
          { name: "其他", value: 7 },
        ],
        labelLine: {},
        label: {
          normal: {
            formatter: "{b|{b}}\n{hr|}\n{c|{c}}",
            rich: {
              b: {
                fontSize: 12,
                color: "#333",
                align: "left",
                padding: 0,
              },

              c: {
                fontSize: 12,
                align: "center",
                padding: 0,
                color: "#333",
              },
            },
          },
        },
      },
    ],
  };
  return option;
};
export let chart_29 = (echarts) => {
  var option = {
    backgroundColor: "#ffffff",
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    grid: {
      left: "2%",
      right: "4%",
      bottom: "14%",
      top: "16%",
      containLabel: true,
    },
    legend: {
      data: ["1", "2", "3"],
      right: 10,
      top: 12,
      textStyle: {
        color: "#333333",
      },
      itemWidth: 12,
      itemHeight: 10,
      // itemGap: 35
    },
    xAxis: {
      type: "category",
      data: [
        "2月1日",
        "2月2日",
        "2月3日",
        "2月4日",
        "2月5日",
        "2月6日",
        "2月7日",
        "2月8日",
      ],
      axisLine: {
        lineStyle: {
          color: "#7B8C95",
        },
      },
      axisLabel: {
        interval: 0,
        // rotate: 40,
        textStyle: {
          fontFamily: "Microsoft YaHei",
        },
      },
    },

    yAxis: {
      type: "value",
      max: null,
      axisLine: {
        show: false,
        lineStyle: {
          color: "#7B8C95",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#E9F3F8",
        },
      },
      axisLabel: {},
    },
    series: [
      {
        name: "",
        type: "bar",
        barWidth: 20,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#D0F0EE",
              },
              {
                offset: 1,
                color: "#97CBE7",
              },
            ]),
            barBorderRadius: [10, 10, 0, 0],
          },
        },
        data: [400, 400, 300, 300, 300, 400, 400, 400, 300],
      },
    ],
  };
  return option;
};
export let chart_30 = () => {
  let option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    legend: {
      data: ["男性", "女性"],
      top: 0,
      right: 10,
      itemWidth: 30,
      itemHeight: 10,
      itemGap: 35,
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "10%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      max: null,
    },
    yAxis: {
      type: "category",
      data: ["福建", "广州", "厦门", "南宁", "背景", "长沙", "重庆"],
    },
    series: [
      {
        name: "男性",
        type: "bar",
        stack: "总量",
        barWidth: 30,
        itemStyle: {
          normal: {
            color: "rgb(151,203,231)",
            barBorderRadius: [0, 20, 20, 0],
          },
        },
        label: {
          normal: {
            show: true,
            position: "insideRight",
          },
        },
        z: 10,
        data: [320, 302, 301, 334, 390, 330, 320],
      },
      {
        name: "女性",
        type: "bar",
        stack: "总量",
        itemStyle: {
          normal: {
            color: "rgb(208,240,239)",
            shadowBlur: [0, 0, 0, 10],
            shadowColor: "rgb(208,240,239)",
            barBorderRadius: [0, 20, 20, 0],
            // shadowOffsetX: -20,
          },
        },
        label: {
          normal: {
            show: true,
            position: "insideRight",
          },
        },
        z: 5,
        data: [120, 132, 101, 134, 90, 230, 210],
      },
    ],
  };
  return option;
};
export let chart_31 = () => {
  let option = {
    backgroundColor: "#fff",

    tooltip: {
      trigger: "item",
      formatter: "{b} : {d}% <br/> {c}",
    },
    legend: {
      // orient: "vertical",
      data: [
        "客服部",
        "内容审核",
        "管理者",
        "其他",
        "客服部1",
        "内容审核1",
        "管理者1",
        "其他1",
        "客服部2",
        "内容审核2",
        "管理者2",
        "其他2",
      ],
      left: "center",
      top: "0",
      textStyle: {
        color: "#333",
        fontSize: 12,
      },
    },
    series: [
      {
        type: "pie",
        radius: ["70", "120"],
        center: ["50%", "50%"],
        // color: ["#B3EBD5", "#97CBE7", "#F7ACAC", "#F6E5C9"],
        itemStyle: {
          normal: {
            borderWidth: 1,
            borderColor: "#fff",
          },
        },
        data: [
          { name: "客服部", value: 15 },
          { name: "内容审核", value: 30 },
          { name: "管理者", value: 174 },
          { name: "其他", value: 7 },
          { name: "客服部1", value: 15 },
          { name: "内容审核1", value: 30 },
          { name: "管理者1", value: 174 },
          { name: "其他1", value: 7 },
          { name: "客服部2", value: 15 },
          { name: "内容审核2", value: 30 },
          { name: "管理者2", value: 174 },
          { name: "其他2", value: 7 },
        ],
        labelLine: {},
        label: {
          normal: {
            formatter: "{b|{b}}\n{hr|}\n{c|{c}}",
            rich: {
              b: {
                fontSize: 12,
                color: "#333",
                align: "left",
                padding: 4,
              },

              c: {
                fontSize: 12,
                align: "center",
                padding: 4,
                color: "#333",
              },
            },
          },
        },
      },
    ],
  };
  return option;
};
export let chart_32 = () => {
  let option = {
    backgroundColor: "#fff",

    tooltip: {
      trigger: "item",
      formatter: "{b} : {d}% <br/> {c}",
    },
    legend: {
      // orient: "vertical",
      data: ["客服部", "内容审核", "管理者", "其他"],
      left: "center",
      top: "30px",
      textStyle: {
        color: "#333",
        fontSize: 12,
      },
    },
    series: [
      {
        type: "pie",
        radius: ["20", "40"],
        center: ["50%", "50%"],
        color: ["#B3EBD5", "#97CBE7", "#F7ACAC", "#F6E5C9"],
        itemStyle: {
          normal: {
            borderWidth: 1,
            borderColor: "#fff",
          },
        },
        data: [
          { name: "客服部", value: 15 },
          { name: "内容审核", value: 30 },
          { name: "管理者", value: 174 },
          { name: "其他", value: 7 },
        ],
        labelLine: {},
        label: {
          normal: {
            formatter: "{b|{b}}\n{hr|}\n{c|{c}}",
            rich: {
              b: {
                fontSize: 12,
                color: "#333",
                align: "left",
                padding: 0,
              },

              c: {
                fontSize: 12,
                align: "center",
                padding: 0,
                color: "#333",
              },
            },
          },
        },
      },
    ],
  };
  return option;
};
export let chart_33 = () => {
  let option = {
    backgroundColor: "#fff",

    tooltip: {
      trigger: "item",
      formatter: "{b} : {d}% <br/> {c}",
    },
    legend: {
      // orient: "vertical",
      data: ["客服部", "内容审核", "管理者", "其他"],
      left: "center",
      top: "30px",
      textStyle: {
        color: "#333",
        fontSize: 12,
      },
    },
    series: [
      {
        type: "pie",
        radius: ["20", "40"],
        center: ["50%", "50%"],
        color: ["#B3EBD5", "#97CBE7", "#F7ACAC", "#F6E5C9"],
        itemStyle: {
          normal: {
            borderWidth: 1,
            borderColor: "#fff",
          },
        },
        data: [
          { name: "客服部", value: 15 },
          { name: "内容审核", value: 30 },
          { name: "管理者", value: 174 },
          { name: "其他", value: 7 },
        ],
        labelLine: {},
        label: {
          normal: {
            formatter: "{b|{b}}\n{hr|}\n{c|{c}}",
            rich: {
              b: {
                fontSize: 12,
                color: "#333",
                align: "left",
                padding: 0,
              },

              c: {
                fontSize: 12,
                align: "center",
                padding: 0,
                color: "#333",
              },
            },
          },
        },
      },
    ],
  };
  return option;
};
export let chart_34 = () => {
  let option = {
    backgroundColor: "#fff",

    tooltip: {
      trigger: "item",
      formatter: "{b} : {d}% <br/> {c}",
    },
    legend: {
      // orient: "vertical",
      data: ["客服部", "内容审核", "管理者", "其他"],
      left: "center",
      top: "30px",
      textStyle: {
        color: "#333",
        fontSize: 12,
      },
    },
    series: [
      {
        type: "pie",
        radius: ["20", "40"],
        center: ["50%", "50%"],
        color: ["#B3EBD5", "#97CBE7", "#F7ACAC", "#F6E5C9"],
        itemStyle: {
          normal: {
            borderWidth: 1,
            borderColor: "#fff",
          },
        },
        data: [
          { name: "客服部", value: 15 },
          { name: "内容审核", value: 30 },
          { name: "管理者", value: 174 },
          { name: "其他", value: 7 },
        ],
        labelLine: {},
        label: {
          normal: {
            formatter: "{b|{b}}\n{hr|}\n{c|{c}}",
            rich: {
              b: {
                fontSize: 12,
                color: "#333",
                align: "left",
                padding: 0,
              },

              c: {
                fontSize: 12,
                align: "center",
                padding: 0,
                color: "#333",
              },
            },
          },
        },
      },
    ],
  };
  return option;
};
export let chart_35 = () => {
  let option = {
    backgroundColor: "#fff",

    tooltip: {
      trigger: "item",
      formatter: "{b} : {d}% <br/> {c}",
    },
    legend: {
      // orient: "vertical",
      data: ["客服部", "内容审核", "管理者", "其他"],
      left: "center",
      top: "30px",
      textStyle: {
        color: "#333",
        fontSize: 12,
      },
    },
    series: [
      {
        type: "pie",
        radius: ["20", "40"],
        center: ["50%", "50%"],
        color: ["#B3EBD5", "#97CBE7", "#F7ACAC", "#F6E5C9"],
        itemStyle: {
          normal: {
            borderWidth: 1,
            borderColor: "#fff",
          },
        },
        data: [
          { name: "客服部", value: 15 },
          { name: "内容审核", value: 30 },
          { name: "管理者", value: 174 },
          { name: "其他", value: 7 },
        ],
        labelLine: {},
        label: {
          normal: {
            formatter: "{b|{b}}\n{hr|}\n{c|{c}}",
            rich: {
              b: {
                fontSize: 12,
                color: "#333",
                align: "left",
                padding: 0,
              },

              c: {
                fontSize: 12,
                align: "center",
                padding: 0,
                color: "#333",
              },
            },
          },
        },
      },
    ],
  };
  return option;
};
export let chart_36 = () => {
  let option = {
    backgroundColor: "#fff",

    tooltip: {
      trigger: "item",
      formatter: "{b} : {d}% <br/> {c}",
    },
    legend: {
      // orient: "vertical",
      data: [
        "客服部",
        "内容审核",
        "管理者",
        "其他",
        "客服部1",
        "内容审核1",
        "管理者1",
        "其他1",
        "客服部2",
        "内容审核2",
        "管理者2",
        "其他2",
      ],
      left: "center",
      top: "0",
      textStyle: {
        color: "#333",
        fontSize: 12,
      },
    },
    series: [
      {
        type: "pie",
        radius: ["70", "120"],
        center: ["50%", "50%"],
        // color: ["#B3EBD5", "#97CBE7", "#F7ACAC", "#F6E5C9"],
        itemStyle: {
          normal: {
            borderWidth: 1,
            borderColor: "#fff",
          },
        },
        data: [
          { name: "客服部", value: 15 },
          { name: "内容审核", value: 30 },
          { name: "管理者", value: 174 },
          { name: "其他", value: 7 },
          { name: "客服部1", value: 15 },
          { name: "内容审核1", value: 30 },
          { name: "管理者1", value: 174 },
          { name: "其他1", value: 7 },
          { name: "客服部2", value: 15 },
          { name: "内容审核2", value: 30 },
          { name: "管理者2", value: 174 },
          { name: "其他2", value: 7 },
        ],
        labelLine: {},
        label: {
          normal: {
            formatter: "{b|{b}}\n{hr|}\n{c|{c}}",
            rich: {
              b: {
                fontSize: 12,
                color: "#333",
                align: "left",
                padding: 4,
              },

              c: {
                fontSize: 1,
                align: "center",
                padding: 4,
                color: "#333",
              },
            },
          },
        },
      },
    ],
  };

  return option;
};
export let chart_37 = () => {
  let option = {
    backgroundColor: "#fff",

    tooltip: {
      trigger: "item",
      formatter: "{b} : {d}% <br/> {c}",
    },
    legend: {
      // orient: "vertical",
      data: [
        "客服部",
        "内容审核",
        "管理者",
        "其他",
        "客服部1",
        "内容审核1",
        "管理者1",
        "其他1",
        "客服部2",
        "内容审核2",
        "管理者2",
        "其他2",
      ],
      left: "center",
      top: "0",
      textStyle: {
        color: "#333",
        fontSize: 12,
      },
    },
    series: [
      {
        type: "pie",
        radius: ["70", "120"],
        center: ["50%", "50%"],
        // color: ["#B3EBD5", "#97CBE7", "#F7ACAC", "#F6E5C9"],
        itemStyle: {
          normal: {
            borderWidth: 1,
            borderColor: "#fff",
          },
        },
        data: [
          { name: "客服部", value: 15 },
          { name: "内容审核", value: 30 },
          { name: "管理者", value: 174 },
          { name: "其他", value: 7 },
          { name: "客服部1", value: 15 },
          { name: "内容审核1", value: 30 },
          { name: "管理者1", value: 174 },
          { name: "其他1", value: 7 },
          { name: "客服部2", value: 15 },
          { name: "内容审核2", value: 30 },
          { name: "管理者2", value: 174 },
          { name: "其他2", value: 7 },
        ],
        labelLine: {},
        label: {
          normal: {
            formatter: "{b|{b}}\n{hr|}\n{c|{c}}",
            rich: {
              b: {
                fontSize: 12,
                color: "#333",
                align: "left",
                padding: 4,
              },

              c: {
                fontSize: 12,
                align: "center",
                padding: 4,
                color: "#333",
              },
            },
          },
        },
      },
    ],
  };

  return option;
};
